Custom file upload handling with jQuery based on different requirements

Learn how to implement custom file upload functionality using jQuery tailored to various use cases. This guide covers handling single and multiple file uploads, validating file types and sizes, providing real-time previews, customizing the upload UI, and managing asynchronous uploads with progress indicators. Perfect for developers seeking flexible and user-friendly file upload solutions.

Topics covered:

1. How to create a custom file upload interface using HTML, CSS and Jquery

2. Accepted file upload extensions: .jpg, .png, .gif, .svg, .pdf, .webp

3. How to validate file upload on change to allow only: JPG, PNG, GIF, SVG, PDF, or WEBP formats

4. Display uploaded file preview using jQuery.

5. How to render an image at a fixed width and height regardless of the uploaded image size

6. How to send a rendered image to the backend on form submission

Point 1: How to create a custom file upload interface using HTML, CSS and JQuery

HTML Code:

<div class="file-select-button" id="fileName">Upload File</div>

</div>

CSS Code:

.file-upload .file-select .file-select-name {padding-left:5px;}

.file-upload{padding-top:0px; display:block;text-align:center;font-family: Helvetica, Arial, sans-serif;font-size: 12px;}

.file-upload .file-select{display:block;border: 1px solid #ccc;color: #34495e;cursor:pointer;height:32px;line-height:32px;text-align:left;background:#FFFFFF;position:relative;}

.file-upload .file-select .file-select-button{background: #f2f2f2;

padding: 0 10px;

display: inline-block;

line-height: 36px;

border-top-left-radius: 0.25rem;

border-bottom-left-radius: 0.25rem;}

.file-upload .file-select .file-select-name{color: #495057;font-size:13px; line-height:32px;display: contents; }

.file-upload .file-select:hover{border-color:#34495e;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}

.file-upload .file-select:hover .file-select-button{background:#34495e;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}

.file-upload .file-select input[type=file]{z-index:100;cursor:pointer;position:absolute;height:100%;width:100%;top:0;left:0;opacity:0;filter:alpha(opacity=0);}

.file-upload .file-select.file-select-disabled{opacity:0.65;}

.file-upload .file-select.file-select-disabled:hover{cursor:default;display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:40px;line-height:40px;margin-top:5px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}

.file-upload .file-select.file-select-disabled:hover .file-select-button{background:#dce4ec;color:#666666;padding:0 10px;display:inline-block;height:40px;line-height:40px;}

.file-upload .file-select.file-select-disabled:hover .file-select-name{line-height:40px;display:inline-block;padding:0 10px;}

.file-upload .file-select { height: 38px;

border-radius: 0.25rem;}

jQuery Code:

$("#pic").change(function(evt) {

var filechoose = $("#pic").val();

if (/^\s*$/.test(filechoose)) {

$(".file-upload").removeClass('active');

$("#noFile").text("No file chosen...");

}

else {

$(".file-upload").addClass('active');

$("#noFile").text(filechoose.replace("C:\\fakepath\\", ""));

}

})

Point 2: Accepted file upload extensions: .jpg, .png, .gif, .svg, .pdf, .webp

HTML :

If you want use simple just use the below code:

Point 3: Validate file upload on change to allow only: JPG, PNG, GIF, SVG, PDF, or WEBP formats

HTML Code:

<div class="file-select-button" id="fileName">Upload File</div>

</div>

jQuery Code:

$("#pic").change(function(evt) {

reader.onload = function(e) {

let fileName = $('.customFile ').val();

let extension = fileName.substring(fileName.lastIndexOf('.') + 1);

console.log('File extension:', extension);

if (extension == "png" || extension == "jpg" || extension == "gif" || extension == "svg" || extension == "pdf" || extension == "webp") {

}else {

alert('Only jpg,png,gif,svg,pdf,webp files are allowed!')

$('.customFile ').val('');

return false;

}

});

Point 4 : Display uploaded file preview using jQuery

HTML Code:

<div class="file-select-button" id="fileName">Upload File</div>

</div>

</div>

jQuery Code:

$("#pic").change(function(evt) {

let file = evt.target.files[0];

// Clear previous preview

$('#image-holder').empty();

if (file && file.type.startsWith('image/')) {

let reader = new FileReader();

reader.onload = function (e) {

$('#image-holder').append('<img src="' + e.target.result + '" alt="Image Preview">');

}

reader.readAsDataURL(file);

}

});

Point 5 : How to render an image at a fixed width and height regardless of the uploaded image size

HTML Code:

<div class="file-select-button" id="fileName">Upload File</div>

</div>

</div>

jQuery Code:

$("#pic").change(function(evt) {

var files = evt.target.files;

var file = files[0];

if (file) {

var reader = new FileReader();

reader.onload = function(e) {

document.getElementById('image-holder').src = e.target.result;

if (window.File && window.FileReader && window.FileList && window.Blob) {

var filesToUploads = document.getElementById('pic').files;

var file = filesToUploads[0];

if (file) {

var reader = new FileReader();

// Set the image once loaded into file reader

reader.onload = function(e) {

var img = document.createElement("img");

img.src = e.target.result;

var canvas = document.createElement("canvas");

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0);

var width = 120;

var height = 60;

canvas.width = width;

canvas.height = height;

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, width, height);

dataurl = canvas.toDataURL(file.type);

document.getElementById('image-holder').src = dataurl;

}

reader.readAsDataURL(file);

}

};

reader.readAsDataURL(file);

}

});

Point 6: How to send a rendered image to the backend on form submission

jQuery Code:

function base64ToFile(base64, filename) {

const arr = base64.split(",");

const mime = arr[0].match(/:(.*?);/)[1];

const bstr = atob(arr[1]);

let n = bstr.length;

const u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = bstr.charCodeAt(n);

}

return new File([u8arr], filename, { type: mime });

}

$("#pic").change(function(evt) {

var files = evt.target.files;

var file = files[0];

if (file) {

var reader = new FileReader();

reader.onload = function(e) {

document.getElementById('image-holder').src = e.target.result;

if (window.File && window.FileReader && window.FileList && window.Blob) {

var filesToUploads = document.getElementById('pic').files;

var file = filesToUploads[0];

if (file) {

var reader = new FileReader();

// Set the image once loaded into file reader

reader.onload = function(e) {

var img = document.createElement("img");

img.src = e.target.result;

canvas.width = width;

canvas.height = height;

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, width, height);

dataurl = canvas.toDataURL(file.type);

document.getElementById('image-holder').src = dataurl;

// Convert and set to file input

const file_1 = base64ToFile(dataurl, + $('image-holder').src);

// Use DataTransfer to simulate selection

const dataTransfer = new DataTransfer();

dataTransfer.items.add(file_1);

document.getElementById("pic").files = dataTransfer.files;

}

reader.readAsDataURL(file);

}

};

reader.readAsDataURL(file);

}

});

Complete Solution Code for All Requirements:

function base64ToFile(base64, filename) {

const arr = base64.split(",");

const mime = arr[0].match(/:(.*?);/)[1];

const bstr = atob(arr[1]);

let n = bstr.length;

const u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = bstr.charCodeAt(n);

}

return new File([u8arr], filename, { type: mime });

}

$("#pic").change(function(evt) {

var filechoose = $("#pic").val();

if (/^\s*$/.test(filechoose)) {

$(".file-upload").removeClass('active');

$("#noFile").text("No file chosen...");

}

else {

$(".file-upload").addClass('active');

$("#noFile").text(filechoose.replace("C:\\fakepath\\", ""));

}

var files = evt.target.files;

var file = files[0];

$('#PartnersLogos2').hide();

if (file) {

var reader = new FileReader();

reader.onload = function(e) {

document.getElementById('image-holder').src = e.target.result;

if (window.File && window.FileReader && window.FileList && window.Blob) {

var filesToUploads = document.getElementById('pic').files;

var file = filesToUploads[0];

if (file) {

var reader = new FileReader();

// Set the image once loaded into file reader

reader.onload = function(e) {

var img = document.createElement("img");

img.src = e.target.result;

let fileName = $('.partnersLogos ').val();

let extension = fileName.substring(fileName.lastIndexOf('.') + 1);

console.log('File extension:', extension);

if (extension == "png" || extension == "jpg" || extension == "gif" || extension == "svg" || extension == "pdf" || extension == "webp") {

}else {

alert('Only jpg,png,gif,svg,pdf,webp files are allowed!')

$('.customFile ').val('');

$('#noFile').text('')

$('#image-holder').hide();

return false;

}

if(extension == 'pdf'){

$('#profile-embed-tag-empty').attr('src', e.target.result).show();

$('#profile-embed-tag-empty').css({"padding-top": "0", "padding": "5px"});

$('#profile-img-tag-empty').show();

$('#image-holder').hide();

} else {

$('#image-holder').attr('src', e.target.result).show();

$('#profile-img-tag-empty').css({"padding-top": "0", "padding": "5px"});

$('#image-holder').show();

$('#profile-embed-tag-empty').hide();

}

var canvas = document.createElement("canvas");

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0);

var width = 120;

var height = 60;

canvas.width = width;

canvas.height = height;

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, width, height);

dataurl = canvas.toDataURL(file.type);

document.getElementById('image-holder').src = dataurl;

// Convert and set to file input

const file_1 = base64ToFile(dataurl, + $('image-holder').src);

// Use DataTransfer to simulate selection

const dataTransfer = new DataTransfer();

dataTransfer.items.add(file_1);

document.getElementById("pic").files = dataTransfer.files;

}

reader.readAsDataURL(file);

}

};

reader.readAsDataURL(file);

}

});

Real Time Javascript and jQuery Functionalities and Issues

Friday, August 22, 2025

Custom file upload handling with jQuery based on different requirements

Complete Solution Code for All Requirements:

No comments:

Post a Comment